<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="/static/js/axios-0.18.0.js"></script>
    <script src="/static/plugins/echarts/echarts.js"></script>
    <script src="/static/js/vue.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .el-header {
            background-color: #ffffff;
            text-align: center;
            line-height: 80px;
            padding-top: 10px;
        }

        a:link {
            text-decoration: none;
            color: #53a100;
        }

        a:visited {
            text-decoration: none;
            color: #4cae4c;
        }

        a:hover {
            text-decoration: none;
            color: #82fa1b;
        }

        a:active {
            text-decoration: none;
            color: #015306;
        }

        a {
            font-size: 20px;
        }

        .imputStyle {
            padding-top: 9px;
            text-align: center;
            height: 4rem;
            border: 1px solid #4cae4c;
            line-height: 48px;
            border-radius: 20px;
            outline: none;
            font-size: 15px;
        }

        .ps-badge {
            display: inline-block;
            position: absolute;
            margin-top: 0;
            margin-left: 0;
            width: 80px;
            height: 35px;
            z-index: 10;
            background-color: #e36401;
        }

        .ps-badge > span {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #efefef;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }
        .el-main {
            color: #333;
            text-align: center;
            height: auto;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }
    </style>
</head>
<body style="width: 100%;margin: 0px;padding: 0px;">
<div id="app">
    <div class="el-header">
        <el-col :span="8">
            <div class="grid-content bg-purple" style="float: left">
                <a href="/"><img height="70px" width="200px" src="/static/pic/logo.jpg"/></a>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1"><a href="/" style="color: #4cae4c">首页</a>
                    </el-menu-item>
                    <el-menu-item index="2"><a href="/commolist/commolist" style="color: #4cae4c">二手商品</a>
                    </el-menu-item>
                    <el-menu-item index="3"><a href="/commolist/news" style="color: #4cae4c">网站公告</a>
                    </el-menu-item>
                    <el-menu-item index="4"><a href="/commolist/feedback" style="color: #4cae4c">联系我们</a>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="4">
            <div style="">
                <input @keyup.enter="findall" class="imputStyle" v-model="inputString" placeholder="请输入..."/>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple-light right" style="float: right" v-if="islogin">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-submenu>
                        <template slot="title">
                            <el-avatar
                                    :src="userimage"></el-avatar>
                            {{username}}
                        </template>
                        <a href="/user/centre" target="_blank">
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                        </a>
                        <el-menu-item index="2-3" @click="quit">退出</el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
            <div class="el-menu-demo" style="float: right; text-align: center" v-else>
                <a href="/login">登陆&注册</a>
            </div>
        </el-col>
    </div>
    <div style="height: 10px;background-color: #ffffff"></div>
    <div style="width: 100%;height: 40px;margin-top: 80px">
            <div style="width: 100%;height: 50px;">
                <el-divider></el-divider>
            </div>
    </div>
    <div style="height: 30px;background-color: #ffffff"></div>
    <!--商品详情-->
    <div id="two" style="width: 100%;height: auto;text-align: center;">
        <template>
            <div style="padding-left: 500px;height: 600px;width: 1000px;margin: 0px; float: left">
                <img style="width: 100%; height: 100%" :src="commdetail.image"/>
            </div>
            <div style="padding-left: 50px; padding-top: 30px;float: left;padding-right: 400px;text-align: left">
                <div style="font-size: 35px;color: #1d1d1d;">{{commdetail.commname}}</div>
                <div>
                    <el-avatar :src="userinfo.uimage" :size="60"></el-avatar>
                    <span style="font-size: 20px;color: #2b542c">{{userinfo.username}}</span>
                </div>
                <div style="height: 20px;color: white"></div>
                <div>
                    <span style="font-size: 40px;color: #3a8ee6">￥{{commdetail.thinkmoney}}</span><span style="color: #5e5e5e;font-size: 10px;text-decoration:line-through;">{{commdetail.orimoney}}</span>
                </div>
                <div style="height: 30px;color: white"></div>
                <div>
                    <el-tag type="success"><span style="font-size: 20px;">地址</span></el-tag><span style="font-size: 20px;color: #2b542c">{{commdetail.school}}</span>
                </div>
                <div style="height: 30px;color: white"></div>
                <div>
                    <el-tag type="success"><span style="font-size: 20px;">标签</span></el-tag><span style="font-size: 20px;color: #269abc">{{commdetail.common}}</span>
                </div>
                <div style="height: 30px;color: white"></div>
                <div>
                    <el-tag type="success"><span style="font-size: 20px;">日期</span></el-tag><span style="font-size: 15px;color: #5e5e5e">{{commdetail.createtime}}</span>
                </div>
                <div style="height: 30px;color: white"></div>
                <div>
                    <el-tag type="success"><span style="font-size: 20px;">浏览</span></el-tag><span style="font-size: 20px;color: #1d1d1d">{{commdetail.rednumber}}</span>
                </div>
                <div>
                    <div style="padding-left: 10px;">
                        <span style="font-size: 40px;color: indianred">
                            <el-button type="success" round @click="purchase" >购买<i class="el-icon-s-goods"></i></el-button>
                        </span>
                        <span style="font-size: 40px;color: indianred">
                            <el-button type="warning" :icon="classleixing" circle @click="collect"></el-button>
                            <!--<i :class="classleixing" @click="collect"></i>-->
                        </span>
                    </div>
                </div>
            </div>
        </template>

    </div>
    <div style="height: 30px;background-color: #ffffff"></div>

    <div style="width: 80%;height: auto; margin: 0 auto;padding-top: 600px">
        <!--商品详情-->
        <template>
            <el-tabs v-model="activeName">
                <!--商品详情-->
                <el-tab-pane label="商品详情" name="first">
                    <el-divider content-position="left"><span style="font-size: 20px;color: #00c620;">商品详情</span></el-divider>
                    <span style="font-size: 20px;color: #1d1d1d">{{commdetail.commdesc}}</span>
                    <template>
                        <el-carousel indicator-position="outside" height="600px">
                            <el-carousel-item v-for="item in detailpic" :key="item">
                                <img :src="item" style="height: 600px;width: 80%;padding-top: 60px;padding-left: 400px">
                            </el-carousel-item>
                        </el-carousel>
                    </template>

                </el-tab-pane>
                <!--评论-->
                <el-tab-pane label="评论" name="second">
                    <el-row v-for="item in comments" :key="item.cid">
                        <el-col :span="2">
                            <el-avatar :src="item.cuserimage" :size="60"></el-avatar>
                        </el-col>
                        <el-col :span="22">
                            <span style="font-size: 15px;color: #47e848;">By: {{item.cusername}}--{{item.commtime}}</span><br/>
                            <span style="font-size: 20px;color: #3d3d3d;">{{item.content}}</span>
                        </el-col>
                        <div style="height: 5px;"></div>
                    </el-row>
                    <!--分页-->
                    <div class="pagination-container">
                        <el-pagination
                                class="pagiantion"
                                @current-change="handleCurrentChange"
                                :current-page="pagination.currentPage"
                                :page-size="pagination.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="pagination.total">
                        </el-pagination>
                    </div>
                    <el-divider content-position="left"><span style="font-size: 20px;color: #02ac1c;">评论</span></el-divider>
                    <div style="height: auto;width: 100%">
                        <el-form ref="commentForm" :model="commentmessage" :rules="rules">
                            <el-form-item prop="message">
                                <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        v-model="commentmessage.message"
                                        :autosize="{minRows:5,maxRows:10}"
                                        maxlength="300"
                                        show-word-limit
                                >
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div style="padding-top: 10px">
                            <el-button type="success" round @click="submit">提交</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>

    <div class="el-main" style="width: 100%;height: auto">
        <template>
            <div id="hottitle" style="width: 90%; padding-top: 20px;">
                <span style="font-size: 30px;color: #4cae4c;padding-right: 1200px"><i
                        class="el-icon-minus">热门商品</i></span>
            </div>
            <div style="width: 80%; margin: 0 auto; padding-top: 20px">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in dataList" :key="item.id" id="commo">
                        <div @click="detail(item.commid)" v-loading.fullscreen.lock="fullscreenLoading"
                             class="demo-image__placeholder" style="padding-top: 30px;margin-right: 20px;">
                            <div class="block" style="width: 300px;height: 350px; border: 1px solid #4cae4c">
                                <div class="ps-badge"><span>Hot</span></div>
                                <img :src="item.image" style="width: 250px;height: 300px"/><br/>
                                <el-tooltip class="item" effect="light" :content="item.commname" placement="top-start"
                                            style="width: 400px">
                                    <span>{{item.commname.substring(0, 16)}}...</span>
                                </el-tooltip>
                                </br>
                                <span style="color: #4cae4c;font-size: 20px">￥{{item.thinkmoney}}</span>
                                <span style="color: #5e5e5e;font-size: 10px">原价{{item.orimoney}}</span>
                            </div>

                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
    <div style="height: 30px;color: white"></div>
    <!--最底部-->
    <div style="width: 100%;height: auto;background-color: #222222">
        <div class="ps-footer__content">
            <div class="ps-container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info">
                            <header><a class="ps-logo" href="/"><img src="/static/pic/logo.jpg"
                                                                     alt=""></a>
                                <h3 class="ps-widget__title">Address Office 1</h3>
                            </header>
                            <footer>
                                <p><strong>460 West 34th Street, 15th floor, New York</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info second">
                            <header>
                                <h3 class="ps-widget__title">Address Office 2</h3>
                            </header>
                            <footer>
                                <p><strong>PO Box 16122 Collins Victoria 3000 Australia</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Find Our store</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--link">
                                    <li><a href="#">Coupon Code</a></li>
                                    <li><a href="#">SignUp For Email</a></li>
                                    <li><a href="#">Site Feedback</a></li>
                                    <li><a href="#">Careers</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Get Help</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Order Status</a></li>
                                    <li><a href="#">Shipping and Delivery</a></li>
                                    <li><a href="#">Returns</a></li>
                                    <li><a href="#">Payment Options</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Products</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Clothing</a></li>
                                    <li><a href="#">Accessries</a></li>
                                    <li><a href="#">Football Boots</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--回到最顶部-->
    <el-backtop>
            <div style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #4cae4c;}">
                <i class="el-icon-caret-top"></i>
                UP
            </div>
        </el-backtop>
</div>

</body>
<script th:inline="javascript">
    var goodsid = [[${gddetail.commid}]];
    var userinfo = [[${userinfo}]];
    var gddetail = [[${gddetail}]];
    var detailpic = [[${detailpic}]];
    var collectstatus = [[${collectstatus}]];
    var nowuserid = [[${nowuserid}]];
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inputString: "",
            islogin: false,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:7,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            classleixing:'el-icon-star-off',
            collectstatus:collectstatus,
            username: "",
            activeName: 'first',
            dialogFormVisible4Desc: false,
            userimage: "",
            pics2: "../static/pic/3.jpg",
            fit: "cover",
            dataList: [],
            commdetail:gddetail,
            userinfo: userinfo,
            fullscreenLoading: false,
            detailpic: detailpic,
            comments: [],
            nowuserid: nowuserid,
            commentmessage: {},
            rules:{
                message: [{required:true,message:'评论为必填项',trigger:'blur'}]
            }
        },
        created() {
            //判断是否登陆
            this.getname();
            this.hotComm();
            this.findcomment();
            //收藏状态
            if(this.collectstatus === 1){
                this.classleixing = "el-icon-star-on";
            }
            if(this.commdetail.commstatus === 1){
                this.isdisable = false;
            }
        },
        methods: {
            //搜索框
            findall() {
                //搜索
                //跳转页面
                window.open("/commodity/lookfor?inputString=" + this.inputString);
            },
            getname() {
                //获取用户信息
                axios.post("/user/getusermess").then((res) => {
                    this.islogin = res.data.flag;
                    if(this.islogin){
                        this.username = res.data.data.username;
                        this.userimage = res.data.data.uimage;
                    }
                })
            },
            //收藏,取消收藏商品
            collect(){
                if(this.islogin){
                    if(this.commdetail.userid === this.nowuserid){
                        this.$message.warning("不能收藏自己发布的商品");
                    }else{
                        //0收藏1取消收藏
                        var flag = 0;
                        if(this.classleixing === "el-icon-star-off"){
                            this.classleixing = "el-icon-star-on";
                        }else{
                            this.classleixing = "el-icon-star-off";
                            flag = 1;
                        }
                        axios.post("/commodity/collect?commid="+this.commdetail.commid + "&flag=" + flag).then((res)=>{
                            if(res.data.flag){
                                //收藏成功
                                this.$message.success(res.data.message);

                            }else{
                                this.$message.error(res.data.message);
                            }
                        })
                    }
                }else{
                    this.$message.warning("请先登录");
                }

            },
            //退出
            quit() {
                axios.post("/user/quit").then((res) => {
                    this.$message.success(res.data.message);
                    //跳转页面
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                        location.href = "/";
                    }, 2000);
                }).catch(() => {
                    this.$message.error("退出失败");
                })
            },
            //查找热门商品和最新商品和最行公告
            hotComm() {
                axios.post("/commodity/hotcomm").then((res) => {
                    if (res.data.flag) {
                        this.dataList = res.data.data.hotcomm;
                    }
                })
            },
            //分页变化
            handleCurrentChange(){
                this.findcomment();
            },
            //查找全部公告
            findcomment(){
                var page ={
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                axios.post("/commodity/findCommentByCommId?commid=" + this.commdetail.commid,page).then((res)=>{
                    this.comments = res.data.rows;
                    this.pagination.total = res.data.total;
                })
            },
            //购买
            purchase(){
                if(this.islogin) {
                    //判断此商品是否已经出售
                    if (this.commdetail.commstatus === 4){
                        this.$message.warning("商品已售出");
                    }else{
                        //判断此商品是否是自己发布的商品
                        if (this.commdetail.userid === this.nowuserid) {
                            this.$message.warning("不能购买自己发布的商品");
                        } else {
                            this.$confirm("确定购买" + this.commdetail.commname + "吗?", "提示", {type: 'warning'}).then(() => {
                                /*axios.post("/alipay/alipay", this.commdetail).then((res) => {
                                })*/
                                window.open("/alipay/alipay?commid=" + this.commdetail.commid,'_self');
                            }).catch(() => {
                                this.$message.warning("已取消");
                            })
                        }
                    }
                }else{
                    this.$message.warning("请先登录");
                }
            },
            //提交评论
            submit(){
                this.$refs['commentForm'].validate((valid)=> {
                    if (valid) {
                        var comment = {
                            commid: this.commdetail.commid,
                            spuserid: this.commdetail.userid,
                            content: this.commentmessage.message,
                        }
                        axios.post("/commodity/addcomment",comment).then((res)=>{
                            if(res.data.flag){
                                this.$message.success(res.data.message);
                                this.findcomment();
                                this.commentmessage = {};
                            }else{
                                this.$message.error(res.data.message);
                            }
                        }).catch(()=>{
                            this.$message.error("请先登陆");
                        })
                    }
                })
            },
            //跳转详情
            detail(commid) {
                //跳转页面
                window.open("/commodity/detail/" + commid, '_blank');
            }
        },

    })
</script>
</html>